<template>
  <div class="app-container">
    <div class="other-main">
      <div class="box-card">
        <h3>阿里云短信验证</h3>
        <el-form ref="codeForm" :model="codeForm" label-width="150px">
          <el-form-item label="是否开启">
            <el-switch
              v-model="codeForm.state"
              :active-value="1"
              :inactive-value="2"
              @change="handleChangeSwitch($event, 'mobileVerification')"
            ></el-switch>
          </el-form-item>
          <el-form-item label="短信签名名称">
            <el-input
              v-model="codeForm.signName"
              placeholder="请输入短信签名名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="短信模板CODE">
            <el-input
              v-model="codeForm.templateCode"
              placeholder="请输入短信模板CODE"
            ></el-input>
          </el-form-item>
          <el-form-item label="AccessKey ID">
            <el-input
              v-model="codeForm.accessKeyId"
              placeholder="请输入AccessKey ID"
            ></el-input>
          </el-form-item>
          <el-form-item label="AccessKey Secret">
            <el-input
              v-model="codeForm.accessKeySecret"
              placeholder="请输入AccessKey Secret"
            ></el-input>
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button type="primary" @click="onSubmit('mobileVerification')"
              >保 存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="box-card">
        <h3>阿里云身份证号验证</h3>
        <el-form ref="cardForm" :model="cardForm" label-width="80px">
          <el-form-item label="是否开启">
            <el-switch
              v-model="cardForm.state"
              :active-value="1"
              :inactive-value="2"
              @change="handleChangeSwitch($event, 'cardIdVerification')"
            ></el-switch>
          </el-form-item>
          <el-form-item label="AppCode">
            <el-input
              v-model="cardForm.appcode"
              placeholder="请输入AppCode"
            ></el-input>
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button type="primary" @click="onSubmit('cardIdVerification')"
              >保 存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="box-card">
        <h3>阿里云虚拟号码</h3>
        <el-form ref="numberForm" :model="numberForm" label-width="150px">
          <el-form-item label="是否开启">
            <el-switch
              v-model="numberForm.state"
              :active-value="1"
              :inactive-value="2"
              @change="handleChangeSwitch($event, 'virtualNumber')"
            ></el-switch>
          </el-form-item>
          <el-form-item label="号码池Key">
            <el-input
              v-model="numberForm.poolKey"
              placeholder="请输入号码池Key"
            ></el-input>
          </el-form-item>
          <el-form-item label="绑定关系的过期时间">
            <el-input
              v-model="numberForm.expiration"
              placeholder="请输入过期时间(分钟)"
              type="number"
              min="1"
              :controls="false"
            ></el-input>
          </el-form-item>
          <el-form-item label="AccessKey ID">
            <el-input
              v-model="numberForm.accessKeyId"
              placeholder="请输入AccessKey ID"
            ></el-input>
          </el-form-item>
          <el-form-item label="AccessKey Secret">
            <el-input
              v-model="numberForm.accessKeySecret"
              placeholder="请输入AccessKey Secret"
            ></el-input>
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button type="primary" @click="onSubmit('virtualNumber')"
              >保 存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog
      title="功能测试"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handleClose"
    >
      <el-form
        ref="dialogForm"
        :model="dialogForm"
        label-width="80px"
        v-if="type === 'cardIdVerification'"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="dialogForm.name"></el-input>
          <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
        </el-form-item>
        <el-form-item label="身份证号" prop="cardId">
          <el-input v-model="dialogForm.cardId"></el-input>
        </el-form-item>
        <el-form-item>
          <span style="margin-right: 20px">测试成功后，才可以修改</span>
          <el-button type="text" @click="handleClickTest">测试</el-button>
        </el-form-item>
      </el-form>
      <el-form
        ref="dialogForm"
        :model="dialogForm"
        label-width="80px"
        v-if="type === 'mobileVerification'"
      >
        <el-form-item label="手机号码" prop="phoneNumbers">
          <el-input v-model="dialogForm.phoneNumbers"></el-input>
          <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
        </el-form-item>
        <el-form-item>
          <span style="margin-right: 20px">测试成功后，才可以修改</span>
          <el-button type="text" @click="handleClickTest">测试</el-button>
        </el-form-item>
      </el-form>
      <el-form
        ref="dialogForm"
        :model="dialogForm"
        label-width="80px"
        v-if="type === 'virtualNumber'"
      >
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="dialogForm.phone"></el-input>
          <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
        </el-form-item>
        <el-form-item>
          <span style="margin-right: 20px">测试成功后，才可以修改</span>
          <el-button type="text" @click="handleClickTest">测试</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClickSave">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getInfo, editInfo, codeTest, dataTest,numberTest } from "@/api/system/other";
export default {
  data() {
    return {
      codeForm: {},
      cardForm: {},
      numberForm: {},
      type: "",
      dialogVisible: false,
      dialogForm: {},
      status: "",
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    handleChangeSwitch(val, type) {
      this.type = type;
      if (val === 1) {
        this.dialogVisible = true;
      } else {
        this.edit();
      }
    },
    // 获取初始数据
    getInfo() {
      getInfo().then((res) => {
        if (res.data.cardIdVerification) {
          try {
            this.cardForm = JSON.parse(res.data.cardIdVerification);
          } catch {}
        }
        if (res.data.mobileVerification) {
          try {
            this.codeForm = JSON.parse(res.data.mobileVerification);
          } catch {}
        }
        if(res.data.virtualNumber) {
          try {
            this.numberForm = JSON.parse(res.data.virtualNumber);
          } catch {}
        }
      });
    },
    // 保存
    onSubmit(key) {
      this.type = key;
      this.dialogVisible = true;
    },
    // 修改
    handleClickSave() {
      if (this.status !== "success") {
        this.$message.warning("请先通过测试");
        return;
      }
      this.edit();
    },
    edit() {
      const data = this.handleForm(this.type)
      editInfo({
        [this.type]: JSON.stringify(data),
      }).then((res) => {
        this.dialogVisible = false;
        this.$message.success("修改成功");
      });
    },
    handleForm(type) {
      const data = {
        cardIdVerification: this.cardForm,
        mobileVerification: this.codeForm,
        virtualNumber: this.numberForm
      }
      return data[type]
    },
    // 测试
    handleClickTest() {
      const data = this.handleForm(this.type)
      if (this.type === "cardIdVerification") {
        dataTest({
          ...this.dialogForm,
          ...data,
        }).then((res) => {
          this.$message.success("测试成功");
          this.status = "success";
        });
      } else if (this.type === "mobileVerification") {
        codeTest({
          ...this.dialogForm,
          ...data,
        }).then((res) => {
          this.$message.success("测试成功");
          this.status = "success";
        });
      } else {
        numberTest({
          ...this.dialogForm,
          ...data,
        }).then((res) => {
          this.$message.success("测试成功");
          this.status = "success";
        });
      }
    },
    // 弹窗关闭
    handleClose() {
      this.status = "";
      this.getInfo();
      this.dialogForm = {}
    },
  },
};
</script>
<style lang="scss" scoped>
.other-main {
  column-count: 2;
  column-gap: 40px;
  .box-card {
    padding: 20px;
    box-sizing: border-box;
    break-inside: avoid;
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    background-color: #ffffff;
    overflow: hidden;
    color: #303133;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    margin-bottom: 30px;
  }
}
</style>